<template>
	<view class="formula-pages">
		<view class="menu-block">
			<view class="menu-item" v-for="(item,index) in menuList" :key="index" :class="menuTab>=item.id?'active':''"
				@click="menuTab=item.id">
				<view class="menu-info">
					<view class="number">{{index+1}}</view>
					<view class="text">{{item.name}}</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<template v-if="menuTab==1">
			<view class="map-block">
				<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
				<view class="address">当前地址：新世纪花园12号楼</view>
			</view>
			<view class="info-block">
				<view class="form-item">
					<view class="name-item">
						<view class="must">*</view>
						<view class="name">故障描述</view>
					</view>
					<textarea placeholder="请详细描述故障情况，以便维修人员提前了解..." v-memo="form.content" class="form-crl1"
						maxlength="400" />
				</view>
			</view>
			<view class="info-block">
				<view class="form-item">
					<view class="name-item">
						<view class="name">上传图片</view>
					</view>
					<view class="upload-item">
						<view v-for="(item,index) in form.imgList" class="image-item">
							<view>
								<image mode="aspectFit" :src="cloudStorage+item.url" @click="previewImg(item.url)"
									class="img">
								</image>

							</view>
							<view @click.stop="closeImg(index)" style="display: inline;">
								<view class="iconfont">
									<image src="/static/delete.png" class="delete"></image>
								</view>
							</view>
						</view>
						<view class="upload-content" v-if=" form.imgList.length<6" @click="chooseImage">
							<!-- <image src="/static/upload.png" class="upload-img"></image> -->
							<view class="iconfont icon-a-zhaoxiangji1"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn normal">提交</view>
		</template>
		<template v-if="menuTab==2||menuTab==3||menuTab==4">
			<view class="warning-block">
				<image :src="imgStorage+'/login/warning.png'" class="info-img"></image>
				<view class="warning-title" v-if="menuTab==2">待核实</view>
				<view class="warning-title" v-if="menuTab==3">派单中</view>
				<view class="warning-title" v-if="menuTab==4">待维修</view>
				<view class="warning-text" v-if="menuTab==2">您的报修已提交，待人员上门审核</view>
				<view class="warning-text" v-if="menuTab==3">现场已核实，等待管理员派单</view>
				<view class="warning-text" v-if="menuTab==4">已安排 王师傅18298722023 上门维修</view>
			</view>
			<view class="btn normal" @click="switchTab">返回首页</view>
		</template>
		<template v-if="menuTab==5">
			<view class="warning-block" style="	min-height: 35vh;">
				<image :src="imgStorage+'/login/success.png'" class="info-img"></image>
				<view class="warning-title">已维修</view>
				<view class="warning-text">报修已维修，感谢您的参与</view>
			</view>
			<view class="info-block">
				<view class="info-item">
					<view class="info-name">维修结果</view>
					<view class="img-item">
						<view class="img-info">
							<image class="imgs" src=""></image>
							<view class="status">维修前</view>
						</view>
						<view class="img-info">
							<image class="imgs" src=""></image>
							<view class="status">维修后</view>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="info-name">维修描述</view>
					<view class="form-content">{{describe}}</view>
				</view>
			</view>
			<view class="btn normal" @click="switchTab">返回首页</view>
		</template>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js';
	import {
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				menuTab: 5,
				menuList: [{
						id: 1,
						name: '故障报修'
					},
					{
						id: 2,
						name: '现场核实'
					},
					{
						id: 3,
						name: '派单中'
					},
					{
						id: 4,
						name: '上门维修'
					},
					{
						id: 5,
						name: '维修结果'
					}
				],
				form: {
					time: '2024-12-31',
					selectId: null,
					imgList: [],
					content: ''
				},
				rule: {
					content: {
						name: '故障描述',
						required: true
					}
				},
				longitude: '',
				latitude: '',
				describe: '因冬季地⾯沉降及⻋辆碾轧，导致该点位路⾯出现坑洼不平情况。已安排专业⼈员现场勘查并完成路⾯维修⼯作。同时已采取在社区⽹格群提⽰、现场宣传等⽅式，提醒居⺠注意安全。',
				markers: [{
					id: 1,
					longitude: '',
					latitude: '',
					iconPath: '/static/images/iconPath.png',
					width: 32,
					height: 32,
				}]
			}
		},
		methods: {
			getPosition() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.markers[0].longitude = res.longitude
						that.markers[0].latitude = res.latitude
					}
				});
			},
			previewImg(url) {
				uni.previewImage({
					urls: [this.cloudStorage + url],
				});
			},
			// 删除图片
			closeImg(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前文件',
					success: function(res) {
						if (res.confirm) {
							that.form.imgList.splice(index, 1);
						}
					}
				});
			},
			chooseImage(e) {
				var that = this;
				uni.chooseImage({
					count: 6 - this.form.imgList.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						res.tempFiles.forEach(async item => {
							let path = await uploadFile(item.path, '印证资料', '')
							that.form.imgList.push(path);
						})
					}
				});
			}
		},
		onLoad(e) {
			this.selectId = getStorage('selectId')
			this.getPosition()
		}
	}
</script>

<style lang="scss" scoped>
	.formula-pages {
		padding: 30rpx;

		.menu-block {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 40rpx 10rpx;
			display: flex;
			justify-content: space-between;

			.menu-item:last-child {
				.line {
					display: none;
				}
			}

			.menu-item.active {
				.menu-info {
					.number {
						background-color: $theme-color;
					}

					.text {
						color: $theme-color;
					}
				}

				.line {
					background-color: $theme-color;
				}
			}

			.menu-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: calc(100% / 5);

				.menu-info {
					display: flex;
					flex-direction: column;
					align-items: center;

					.number {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #D8D8D8;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
					}

					.text {
						font-size: 22rpx;
						margin-top: 30rpx;
						color: #AAAAAA;
					}
				}

				.line {
					width: 34rpx;
					height: 2rpx;
					background-color: #D8D8D8;
					position: absolute;
					margin-top: -50rpx;
					margin-left: 110rpx;
				}
			}
		}

		.map-block {
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 30rpx;

			.map {
				width: 100%;
				height: 300rpx;
			}

			.address {
				padding: 30rpx;
				font-size: 30rpx;
			}
		}

		.info-block {
			background-color: #fff;
			padding: 40rpx 30rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;

			.form-item {
				.name-item {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.must {
						color: $theme-color;
					}

					.name {
						font-size: 30rpx;
					}
				}

				.form-crl {
					font-size: 30rpx;
				}

				.form-crl1 {
					font-size: 30rpx;
					height: 160rpx;
					width: 100%;
				}

				.form-content {
					font-size: 30rpx;
					width: 100%;
					line-height: 48rpx;
				}

				.placeholder {
					color: grey;
					font-size: 15px;
				}
			}

			.upload-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 40rpx;

				.image-item {
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					display: flex;
					flex-direction: row;

					.img {
						width: 190rpx;
						height: 250rpx;
						border-radius: 20rpx;
					}

					.iconfont {
						.delete {
							width: 18px;
							height: 18px;
							position: absolute;
							margin-left: -30rpx;
						}
					}
				}

				.image-item:nth-child(3n) {
					margin-right: 0;
				}

				.delete-item {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.delete {
						width: 20px;
						height: 20px;
						position: absolute;
					}
				}

				.upload-content {
					position: relative;
					background: #f8f8f8;
					border-radius: 10px;
					width: 200rpx;
					height: 250rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;

					.upload-img {
						width: 60rpx;
						height: 60rpx;
					}

					.iconfont {
						font-size: 46rpx;
						color: #bebaba;
					}
				}
			}

			.info-item:last-child {
				margin-bottom: 0;
				border-bottom: none;
				padding-bottom: 0;
			}

			.info-item {
				margin-bottom: 30rpx;
				border-bottom: 1px solid #f7f7f7;
				padding-bottom: 30rpx;

				.info-name {
					font-size: 30rpx;
				}

				.form-content {
					font-size: 28 rpx;
					width: 100%;
					line-height: 50rpx;
					margin-top: 20rpx;
				}

				.img-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.img-info {
						width: calc(50% - 15rpx);
						display: flex;
						justify-content: space-between;

						.imgs {
							width: 100%;
							height: 240rpx;
							border-radius: 20rpx;
							background-color: #D8D8D8;
						}

						.status {
							position: absolute;
							margin-left: 190rpx;
							font-size: 24rpx;
							width: 110rpx;
							height: 46rpx;
							background-color: $theme-color;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							border-radius: 0 20rpx 0 20rpx;
						}
					}
				}
			}
		}

		.warning-block {
			min-height: 40vh;
			margin-top: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.info-img {
				width: 240rpx;
				height: 240rpx;
				margin-bottom: 30rpx;
			}

			.warning-title {
				font-weight: bold;
				font-size: 34rpx;
			}

			.warning-text {
				font-size: 30rpx;
				margin-top: 30rpx;
			}
		}

		.btn {
			height: 90rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}

		.btn-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.small-btn {
				width: 320rpx;
				height: 90rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>